<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
  const app=Vue.createApp({
    data(){
      return{
        listObject:{
          GirlOne:'谢大脚',
          GirlTwo:'刘英',
          GirlThree:'晓红'
        }
      }
    },
    methods:{
      handleChangeBtnClick(){
        this.listObject.newone='白天说';
      },
    },
    template:`
      <button @click="handleChangeBtnClick">点点添加</button>
      <ul>
<!--  使用 template 解决多余的div的问题  -->
      <template
        v-for="(item,index) in listObject"
        :key="index+item"
      >
        <li v-if="item != '谢大脚'">
          [{{index}}]{{item}}
        </li>
      </template>
    </ul>
<!--      循环数字-->
      <span v-for="count in 19">{{count}},</span>`

  })
  const vm=app.mount("#app")
</script>
</html>
